<!--
 * @Author: hpc(hepch)
 * @Date: 2021-05-20 14:28:57
 * @LastEditors: 杨光辉(GerhardYang)
 * @LastEditTime: 2021-06-04 12:21:16
 * @Description: filecontent
 * @Copyright: 超图软件华中平台客户中心 (SuperMap Software Co., Ltd. -Central China Platform)
-->
<template>
  <div class="MapLegend">
    <div id="legendContainer" v-show="showlegend">
      <div id="legendCaption">
        <span>图例</span>
      </div>
      <div v-if="data == []">暂无图例</div>

      <div id="legendContent">
        <div class="infolegend" v-for="(item, index) in data" :key="index">
          <div class="featureName">{{ item.name }}</div>
          <span class="featureStyle" :style="item.style"></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [],
      showlegend: false,
    };
  },

  methods: {
    //legendlist是由{key:"",style:{}}组成的数据组，legendlist数据由ThemeMap组件实时传输更新
    //图例实现方式是利用样式绑定的方式
    updateLegend: function (legendList) {
      this.data = [];

      for (let i = 0; i < legendList.length; i++) {
        this.data.push({
          key: i,
          name: legendList[i].key,
          style: {
            backgroundColor: legendList[i].color,
          },
        });
      }
      if (legendList.length == 0) {
        this.showlegend = false;
      } else {
        this.showlegend = true;
      }
    },
  },
  mounted() {
    var _self = this;
    this.Event.$on("leglendList", (data) => {
      _self.updateLegend(data);
    });
  },
};
</script>

<style scoped lang="less">
.MapLegend .legendbtn {
  right: 1.15rem;
  bottom: 1rem;
  position: absolute;
  z-index: 9999;
}

#legendContainer {
  right: 1.15rem;
  bottom: 3.6rem;
  position: absolute;
  z-index: 9999;
  padding: 0.625rem;
  background-color: white;
  overflow: auto;
  min-height: 12.5rem;
  max-height: 30rem;
  min-width: 9.375rem;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  border-radius: 0.3125rem;
}

.MapLegend .infolegend {
  padding: 0.375rem 0.5rem;
  font: 14px/16px Arial, Helvetica, sans-serif;
  text-align: left;
  line-height: 1.125rem;
  color: #555;
  .featureStyle {
    display: inline-block;
    width: 40%;
    height: 1rem;
  }
  .featureName {
    display: inline-block;
    width: 50%;
    margin-left: 10px;
  }
}
</style>
